<template>
  <swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true"
          :autoplay="true" interval="5000" duration="500">
    <swiper-item v-for="(item,index) in swiperList" :key="index">
      <image :src="item.url" mode="aspectFill" v-if="item.type==='image'"></image>
      <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
             v-if="item.type==='video'"></video>
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts">
import {ref} from "vue";

/**
 * 轮播图
 */
const swiperList = ref([
  {
    id: 0,
    type: 'image',
    url: 'https://scpic.chinaz.net/files/pic/pic9/202207/apic42453.jpg'
  }, {
    id: 1,
    type: 'image',
    url: 'https://scpic.chinaz.net/files/pic/pic9/202112/apic37437.jpg',
  }, {
    id: 2,
    type: 'image',
    url: 'https://scpic.chinaz.net/files/pic/pic9/202101/apic30274.jpg'
  }, {
    id: 3,
    type: 'image',
    url: 'https://scpic.chinaz.net/files/pic/pic8/xpic2598.jpg'
  }, {
    id: 4,
    type: 'image',
    url: 'https://scpic.chinaz.net/files/pic/pic9/202011/apic28885.jpg'
  }
])

</script>

<style scoped>

</style>